<template>
	<section>
		<el-form :inline="true" label-width="80px">
        	<el-form-item label="所属部门:">
	            <belong-team @changes="getTeamId" size="small" class="loginCount-tree"></belong-team>
	        </el-form-item>
	    </el-form>
		<el-table :data="performanceData" highlight-current-row height="560" border style="width: 100%;">
			<el-table-column prop="departName" label="所属部门"></el-table-column>
			<el-table-column prop="userName" label="姓名"></el-table-column>
			<el-table-column prop="sum" label="登陆统计" width="360">
				<template scope="scope">
					<div style="text-align:left;">
						<span class="data-bar"
						 :style="{width:scope.row.sum/max *360+'px'}">
						</span>
						<span class="data-num">{{scope.row.sum}}</span>
					</div>
				</template>
			</el-table-column>
		</el-table>
	</section>
</template>
<script>
	import belongTeam from '../components/belongTeam'
	import { getLoginCount } from '../api/api'
	export default{
		components:{belongTeam},
		data(){
			return {
				departId:'',
				performanceData:[],
				max:0,
			}
		},
		methods:{
			getTeamId(id){
				this.departId = id;
				this.getLoginCount();
			},
			getLoginCount(){
				var params={
					departId:this.departId
				}
				getLoginCount(params).then(res=>{
					this.performanceData=res.obj;
					for(var i=0;i<res.obj.length;i++){
						if( this.max < res.obj[i].sum || this.max==res.obj[i].sum){
						    this.max = res.obj[i].sum;
						    console.log(this.max);
						}
					}
				})
			}
		},
		activated:function(){
			this.getTeamId();
		}
	}
</script>
<style lang="scss">
	.data-bar{
		display: inline-block;
		height: 12px;
		max-width: 286px;
		background-color: #76AFF1;
	}
	.data-num{
		color: #76AFF1;
	}
	.loginCount-tree{
		.box-tree{
			max-height:300px;
			overflow:auto;
		}
	}
</style>